<template>
  <div class="settings-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <el-form :model="settings" label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="settings.systemName" />
        </el-form-item>

        <el-form-item label="数据刷新间隔">
          <el-input-number
            v-model="settings.refreshInterval"
            :min="5"
            :max="60"
            :step="5"
          />
          <span class="form-help">秒</span>
        </el-form-item>

        <el-form-item label="数据保留时间">
          <el-input-number
            v-model="settings.dataRetention"
            :min="7"
            :max="365"
            :step="7"
          />
          <span class="form-help">天</span>
        </el-form-item>

        <el-form-item label="告警通知">
          <el-switch v-model="settings.enableNotification" />
        </el-form-item>

        <el-form-item label="通知方式" v-if="settings.enableNotification">
          <el-checkbox-group v-model="settings.notificationMethods">
            <el-checkbox label="email">邮件</el-checkbox>
            <el-checkbox label="sms">短信</el-checkbox>
            <el-checkbox label="wechat">微信</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="通知接收人" v-if="settings.enableNotification">
          <el-input
            v-model="settings.notificationRecipients"
            type="textarea"
            :rows="3"
            placeholder="请输入接收人邮箱或手机号，多个接收人用逗号分隔"
          />
        </el-form-item>

        <el-form-item label="主题设置">
          <el-radio-group v-model="settings.theme">
            <el-radio label="light">浅色</el-radio>
            <el-radio label="dark">深色</el-radio>
            <el-radio label="auto">跟随系统</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="语言">
          <el-select v-model="settings.language">
            <el-option label="简体中文" value="zh-CN" />
            <el-option label="English" value="en-US" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="hover" class="mt-4">
      <template #header>
        <div class="card-header">
          <span>系统信息</span>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
        <el-descriptions-item label="Node.js版本">v16.0.0</el-descriptions-item>
        <el-descriptions-item label="Vue版本">v3.0.0</el-descriptions-item>
        <el-descriptions-item label="Element Plus版本">v2.0.0</el-descriptions-item>
        <el-descriptions-item label="数据库版本">MySQL 8.0</el-descriptions-item>
        <el-descriptions-item label="操作系统">Windows 10</el-descriptions-item>
        <el-descriptions-item label="服务器状态">运行中</el-descriptions-item>
        <el-descriptions-item label="最后更新">2024-03-15</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

interface Settings {
  systemName: string
  refreshInterval: number
  dataRetention: number
  enableNotification: boolean
  notificationMethods: string[]
  notificationRecipients: string
  theme: 'light' | 'dark' | 'auto'
  language: string
}

const defaultSettings: Settings = {
  systemName: 'LabEnergyInsight',
  refreshInterval: 30,
  dataRetention: 30,
  enableNotification: true,
  notificationMethods: ['email'],
  notificationRecipients: '',
  theme: 'light',
  language: 'zh-CN'
}

const settings = ref<Settings>({ ...defaultSettings })

const handleSave = () => {
  // 这里应该调用API保存设置
  ElMessage.success('设置已保存')
}

const handleReset = () => {
  settings.value = { ...defaultSettings }
  ElMessage.success('设置已重置')
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-help {
  margin-left: 10px;
  color: #666;
}

.mt-4 {
  margin-top: 1rem;
}
</style> 